<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>贪吃蛇-JS小游戏</title>
    <meta name="description" content="JS小游戏网页">
    <meta name="keywords" content="Web前端,JS,小游戏">
    <meta name="author" content="Treacy">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/mask.css">
</head>

<body>

    <div class="tt-wrapper">
        <!-- 页面头部 -->
        <header class="tt-header">
            <div class="container">
                <div class="button">
                    <button class="btn-start">开始游戏</button>
                    <button class="btn-pause">暂停游戏</button>
                    <button class="btn-restart">重新开始</button>
                </div>
            </div>
        </header>
        <!-- 页面主体 -->
        <section class="tt-main">
            <div class="container">
                <!-- 地图 -->
                <div class="tt-map">

                </div>
                <!-- 选项 -->
                <div class="tt-option">
                    <div class="op-content">
                        <ul>
                            <li class="difficute">
                                <div class="df-title"><span>难度选择</span></div>
                                <!-- <div class="df-title"><span>难度选择（未开放...）</span></div> -->
                                <div class="df-btn">
                                    <button class="btn-easyMode">我是傻逼</button>
                                    <button class="btn-normalMode">你是个天才</button>
                                    <button class="btn-hardMode">高质量人类</button>
                                </div>
                            </li>
                            <li class="custom">
                                <div class="ct-title"><span>更多设置</span></div>
                                <ol style="margin-top: 20px;">
                                    <li class="ct-mode">
                                        <div class="ct-mode-title">游戏模式</div>
                                        <button class="btn-noBorder">无碰撞模式</button>
                                        <button class="btn-isBorder">边界模式</button>
                                    </li>
                                    <!-- <li class="ct-map">
                                        <div class="ct-map-title"><span>地图设置</span></div>
                                        <div><button>地图行数</button><input type="number"></div>
                                        <div><button>地图列数</button><input type="number"></div>
                                        <div><button>格子宽高</button><input type="number"></div>
                                    </li> -->
                                    <li class="ct-game">
                                        <div class="ct-game-title"><span>游戏设置</span></div>
                                        <div><button>初始长度</button><input type="number"></div>
                                        <div><button>移动速度</button><input type="number"></div>
                                        <div><button>分数加值</button><input type="number"></div>
                                        <button id="confirm">确定</button>
                                        <button id="reset">恢复默认值</button>
                                    </li>
                                    <div class="hidden"><button>X</button></div>
                                </ol>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
        <!-- 页面尾部 -->
        <footer class="tt-footer">
            <div class="container">
                <!-- 计算分数 -->
                <div class="score">
                    分数: <span>0</span>
                </div>
            </div>
        </footer>
    </div>

    <script src="./js/snake.js"></script>
    <!-- <script src="./js/mask.js"></script> -->
    <script>

        new Snake().init();
        // myAlert("XXX");

    </script>
</body>

</html>